<template>
	<transition name='slide'>
    <div class="container seting-color">
      <div class="box">
       <header class="header">
        <div class="header-button isleft">
            <router-link to="/my" tag="label" >
              <span class="iconfont icon-fanhui"></span>
            </router-link>
        </div>
        <h1 class="header-title">个人资料</h1>
        <div class="header-button"></div>
      </header>
      <ul>
      		<li class="picture"><img :src="img"/></li>
      		<li @click="actionSheet">修改头像</li>
      		<mt-actionsheet :actions="data" v-model="sheetVisible">
    			</mt-actionsheet>
      	</ul>
      <div class="content">
      	<div class="wrapper-message">
      		<mt-field label="用户名" placeholder=""></mt-field>
	      	<mt-field label="性别"></mt-field>
					<mt-field label="邮箱" placeholder="" type="email"></mt-field>
					<mt-field label="密码" placeholder="" type="password"></mt-field>
					<mt-field label="电话" placeholder="" type="tel"></mt-field>
					<mt-field label="生日" placeholder="" type="date"></mt-field>
					<mt-field label="身份证号码"></mt-field>
					<mt-field label="故乡"></mt-field>
					<mt-field label="所在城市"></mt-field>
      	</div>
      </div>
      </div>
      <mt-button type="danger" @click='confirm' size="large">确定</mt-button>
    </div>
    </transition>
</template>
<script>
import Vue from 'vue';
import { Field , Actionsheet, Button} from 'mint-ui';
Vue.use(Field, Actionsheet, Button)
export default {
 data () {
    return {
      title: '',
      img: '',
      rating: '',
      username:this.$route.params.username,
      data:[
            {
                name:"拍照"
            },
            {
                name: '从相册中选择' 
            }
            ],
      sheetVisible:false,
    }
  },
	methods: {
		logout () {
			localStorage.clear()
			this.$router.push('/my/nologin')
		},
		actionSheet  () {
      this.sheetVisible = true;
       console.log(1)
    },
     confirm () {
     	//这里调用修改个人信息接口
     }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.wrapper-message{
	 @include overflow();
}
.seting-color{
	 @include background-color(#ddd)
}
.wrapper-seting{
	@include rect(100%,0.36rem);
	margin-top:25px;
	@include background-color(#cecece);
	@include flexbox();
	justify-content:space-between;
	@include align-items(); 
	span{
		margin-left:10px;
		margin-right:10px
	}
}
ul{
	  @include rect(100%, 1rem);
    @include background-color(#ccc);
    @include flexbox();
    justify-content:space-around;
    @include flex-direction(column);
    @include align-items();
	.picture{
	  img{
	    	  	width: 0.5rem;
	    	  	height:0.5rem;
	    	  	border:1px solid #fff;
	    	    border-radius: 50%;
	    	  }
}
 .mint-cell-wrapper{
	height:0.7rem;
}
}

</style>
